<template>
  <div class="service-mangement">
    <div class="top">
      <div class="blue"></div>
      服务记录
    </div>
    <div class="My_option">
      <div class="option_">
        <div class="service-status">
          服务状态<el-select v-model="StateService" class="m-2" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="contractor">
          签约机构<el-select v-model="institutions" class="m-2" placeholder="请选择">
            <el-option
              v-for="item in contractor"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="doctor-team">
          医生团队<el-select v-model="team" class="m-2" placeholder="请选择">
            <el-option
              v-for="item in team"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="new-export">
        <el-button plain>导出</el-button>
      </div>
    </div>
    <div class="choose_time_search">
      <div class="service-status">
        服务状态<el-select v-model="Services" class="m-2" placeholder="请选择">
          <el-option
            v-for="item in Service"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="block">
        <span class="demonstration">服务日期</span>
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          start-placeholder="请选择日期"
          end-placeholder="请选择日期"
        />
      </div>
      <div class="search">
        <el-input v-model="search" class="w-50 m-2" placeholder="请输入关键字">
          <template #prefix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
        </el-input>
      </div>
    </div>
    <div class="table_form">
      <el-table :data="tableData" stripe style="width: 98%" height="500px">
        <el-table-column type="selection" width="40" />
        <el-table-column prop="id" label="编号" width="90" />
        <el-table-column prop="name" label="姓名" width="90" />
        <el-table-column prop="Idcard" label="身份证号" width="190" />
        <el-table-column prop="phone" label="手机号" width="120" />
        <el-table-column prop="state" label="服务状态" width="90" />
        <el-table-column prop="service" label="服务包" width="120" />
        <el-table-column prop="project" label="服务项目" width="120" />
        <el-table-column prop="times" label="申请时间" width="180" />
        <!-- <el-table-column label="test" width="220" /> -->
        <el-table-column fixed="right" label="操作" width="120">
          <template #default>
            <el-button link type="primary" size="small" @click="handleClick">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="paging">
      <el-pagination background layout="prev, pager, next" :total="100" />
    </div>
  </div>
</template>

<script>
export default {
  name: "ServiceManagement",
  data() {
    return {
      search: '',
      StateService: "",
      institutions: "",
      team: "",
      Services: "",
      options: [
        {
          value: "请选择",
          label: "请选择",
        },
        {
          value: "已取消",
          label: "已取消",
        },
        {
          value: "已完成",
          label: "已完成",
        },
      ],
      contractor: [
        {
          value: "请选择",
          label: "请选择",
        },
        {
          value: "罗西社区服务中心",
          label: "罗西社区服务中心",
        },
        {
          value: "天明社区服务中心",
          label: "天明社区服务中心",
        },
        {
          value: "民进社区服务中心",
          label: "民进社区服务中心",
        },
      ],
      team: [
        {
          value: "请选择",
          label: "请选择",
        },
        {
          value: "杨兵团队",
          label: "杨兵团队",
        },
        {
          value: "小虎团队",
          label: "小虎团队",
        },
        {
          value: "胡歌团队",
          label: "胡歌团队",
        },
      ],
      Service: [
        {
          value: "请选择",
          label: "请选择",
        },
        {
          value: "0-6岁儿童服务包",
          label: "0-6岁儿童服务包",
        },
        {
          value: "老年人服务包",
          label: "老年人服务包",
        },
        {
          value: "慢性病服务包",
          label: "慢性病服务包",
        },
      ],
      value1: "",
      shortcuts: [
        {
          text: "Last week",
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            return [start, end];
          },
        },
        {
          text: "Last month",
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            return [start, end];
          },
        },
        {
          text: "Last 3 months",
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            return [start, end];
          },
        },
      ],
      tableData: [
        {
          id: Symbol(),
          checkbox: Math.random > 0.5,
          name: "杨兵",
          Idcard: "511xxxxxxxxxxxxxxxx234",
          phone: "173xxxxxx23",
          state: ["已完成", "已取消", "待服务"][Math.floor(Math.random() * 3)],
          service: "老年人服务包",
          project: "高血压随访",
          times: "2020/10/09 10:09:09",
          operation: "确认",
        },
      ],
    };
  },
  methods: {
    handleClick() {
      this.$router.push('details-service')
    },
  },
};
</script>

<style lang="less" scoped>
.service-mangement {
  overflow: hidden;
}
.top {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 22px;
  margin-top: 10px;
  .blue {
    width: 6px;
    height: 26px;
    border-radius: 10px;
    background: blue;
    margin: 0 15px;
  }
}
.My_option {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  .option_ {
    width: 900px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    font-size: 14px;
    color: rgb(138, 133, 133);
    > .service-status {
      width: 300px;
      height: 50px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    > .contractor {
      width: 300px;
      height: 50px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    > .doctor-team {
      width: 300px;
      height: 50px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }
  .new-export {
    width: 200px;
    height: 50px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
}
.choose_time_search {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  > .service-status {
    width: 300px;
    height: 50px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 14px;
    color: rgb(138, 133, 133);
  }
  > .block {
    width: 550px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: rgb(138, 133, 133);
    > span {
      margin: 0 10px;
    }
  }
  > .search {
    width: 250px;
    height: 50px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
}
.table_form {
    width: 100%;
    height: 500px;
    margin-top: 20px;
  }
  .paging {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
